<template>
  <view class="main_container_box">
    <view class="container_box">
      <view class="work_text">工作台</view>
      <view class="work_en">WORKBENCH</view>
      <view class="main_order_box card" v-for="icons in attendanceList" :key="icons.label">
        <view class="icon_label">
          {{ icons.label }}
        </view>
        <view class="icon_box">
          <icon-label @tap="updatePassword(item)" style="width: 25%; margin-bottom: 10rpx" v-for="(item, index) in icons.children" :key="index" :item="item" />
        </view>
      </view>
      <view class="main_order_box card" v-for="icons in iconList" :key="icons.label" v-if="icons.isShow">
        <view class="icon_label">
          {{ icons.label }}
        </view>
        <view class="icon_box">
          <icon-label @tap="updatePassword(item)" style="width: 25%; margin-bottom: 10rpx" v-for="(item, index) in icons.children" :key="index" :item="item" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import IconLabel from '@/components/iconLabel.vue'
import { setRecentUsed } from '@/service/auth'
import { buildMenus } from '@/service/api/common_down'
export default {
  name: 'home',
  components: { IconLabel },
  data() {
    return {
      attendanceList: [
        {
          label: '考勤管理',
          children: [
            {
              name: '打卡',
              icon: '../../../static/image/sign_in.png',
              url: '/pageAttendance/pages/sign_in/index',
              isShow: true,
            },
            {
              name: '补卡',
              icon: '../../../static/image/buka.png',
              url: '/pageAttendance/pages/laterSign/index',
              isShow: true,
            },
            {
              name: '请假',
              icon: '../../../static/image/qj.png',
              url: '/pageAttendance/pages/attendance/askForLeave/index',
              isShow: true,
            },
            {
              name: '加班',
              icon: '../../../static/image/overtime_icon.png',
              url: '/pageAttendance/pages/attendance/overtime/index',
              isShow: true,
            },
            {
              name: '考勤记录',
              icon: '../../../static/image/record_icon.png',
              url: '/pageAttendance/pages/attendance/attendanceRecord/attendance',
              isShow: true,
            },
          ],
        },
      ],
      iconList: [
        {
          label: '采购管理',
          isShow: true,
          children: [
            {
              name: '采购申请',
              icon: '../../../static/image/cgsq.png',
              url: '/packagePurchase/pages/purchaseApply/list',
            },
            {
              name: '采购订单',
              icon: '../../../static/image/cgdd.png',
              url: '../clock/index',
            },
          ],
        },
        {
          label: '销售管理',
          isShow: false,
          children: [
            {
              name: '销售订单',
              icon: '../../../static/image/xsdd.png',
              url: '../clock/index',
            },
            {
              name: '销售退货',
              icon: '../../../static/image/xsth.png',
              url: '../clock/index',
            },
          ],
        },
        {
          label: '库存管理',
          isShow: true,
          children: [
            {
              name: '库存记录',
              icon: '../../../static/image/kcjl.png',
              url: '../clock/index',
            },
            {
              name: '产品档案',
              icon: '../../../static/image/cpda.png',
              url: '/packagePurchase/pages/goods-info/index',
            },
            {
              name: '领用单',
              icon: '../../../static/image/lyd.png',
              url: '../clock/index',
            },
            {
              name: '盘点单',
              icon: '../../../static/image/pdd.png',
              url: '../clock/index',
            },
          ],
        },
        {
          label: '费用管理',
          isShow: true,
          children: [
            {
              name: '费用申请',
              icon: '../../../static/image/fysq.png',
              url: '/packagePurchase/pages/cost/list',
            },
          ],
        },
      ],
      menu: [],
    }
  },
  onShow() {
    this.$forceUpdate()
  },
  onPullDownRefresh() {},
  created() {
    this.getmenus()
  },
  methods: {
    updatePassword(obj) {
      console.log(obj)
      setRecentUsed(obj)
      uni.navigateTo({ url: obj.url })
    },
    getmenus() {
      buildMenus().then(res => {
        this.menu = res.data.content
        this.iconList.forEach(item => {
          item.children.forEach(subItem => {
            const result = this.menu.some(element => element.componentName === subItem.name)
            this.$set(subItem, 'isShow', result)
          })
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main_container_box {
  background-image: url('@/static/image/workBg.png');
  background-size: cover;
  background-repeat: repeat;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  font-family: 'PingFang SC';
  .container_box {
    margin: 180rpx auto 0;
    width: 700rpx;
    .main_order_box {
      padding: 20rpx;
      background: white;
      margin-bottom: 30rpx;
      .icon_label {
        color: #333333;
        font-weight: bold;
        font-size: 35rpx;
      }
      .icon_box {
        display: flex;
        flex-wrap: wrap;
        font-size: 30rpx;
        margin-top: 20rpx;
      }
    }
  }
  .work_text {
    color: #333333;
    font-size: 50rpx;
    font-weight: bold;
  }
  .work_en {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 45rpx;
  }
}
</style>
